<%--
  Created by IntelliJ IDEA.
  User: 张帆
  Date: 2022/6/28
  Time: 14:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆界面</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <style>
        body {
            background-color: #ECF5FF;
        }
        #tab1,#tab2 {
            text-align: center;
        }
        #tab1_tr1 {
            background-color: #D5EAEA;
            height: 40px;
        }
        #tab2 {
            width: 420px;
            height: 180px;
            font-size: 20px;
            text-align: right;
            margin-left: 100px;
            margin-top: 20px;
        }
        #username,#password {
            background-color: white;
            width: 200px;
            height: 30px;
        }

        .btn {
            width: 60px;
            height: 30px;
            border-radius: 5px;
            font-size: 20px;
        }
        .msg {
            /*background-color: yellow;*/
            color: red;
            font-size: 15px;
            width: 100px;
            height: 20px;
            text-align: left;
        }
    </style>
</head>
<body>
    <form action="userservlet?method=userLogin" method="post">
        <table id="tab1" width="600px" border="1" align="center" style="margin-top: 150px;">
            <tr id="tab1_tr1">
                <td><h1 style="margin-top: 25px">人员档案管理系统</h1></td>
            </tr>
            <tr>
                <td>
                    <table id="tab2">
                        <tr>
                            <td>用户名：</td>
                            <td>
                                <input type="text" name="username" id="username" class="info" onblur="checkMsg();">
                            </td>
                            <td id="nameMsg" class="msg"></td>
                        </tr>
                        <tr>
                            <td>密 码：</td>
                            <td>
                                <input type="password" name="password" id="password" class="info" onblur="checkMsg();">
                            </td>
                            <td id="pwdMsg" class="msg"></td>
                        </tr>
                        <tr style="height: 35px">
                            <td colspan="3">
                                <input class="btn" id="btn1" type="submit" value="登录" >&nbsp;&nbsp;&nbsp;&nbsp;
                                <button class="btn" type="button" id="btn2" style="margin-right: 140px">注册</button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </form>
    <script type="text/javascript">

        $("#btn2").click(function () {
            $(location).attr("href","regist.jsp");
        });
        function checkMsg() {
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;
            let nameMsg = document.getElementById("nameMsg");
            nameMsg.innerHTML = "";
            let pwdMsg = document.getElementById("pwdMsg");
            pwdMsg.innerHTML = "";
            let xhr = new XMLHttpRequest();
            xhr.open("get","userservlet?method=userCheck&username="+username+"&password="+password);
            xhr.send();
            xhr.onreadystatechange = function(){
              if (xhr.readyState == 4 && xhr.status == 200){
                  if (xhr.responseText == "1") {
                      // document.write(123456);
                      nameMsg.innerHTML = "用户名不能为空";
                  }
                  if (xhr.responseText == "2") {
                      pwdMsg.innerHTML = "密码不能为空";
                  }
              }
            };
        };
    </script>
</body>
</html>
